<template>
    <div id="login-form" @keydown.enter="doSubmit">
      <el-form :model="loginForm" id="login" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
        <h1 class="title">用户登录</h1>
        <el-form-item label="用户名">
          <el-input type="text" v-model="loginForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 100%;" @click="doSubmit()">登录</el-button>
        </el-form-item>
        <el-row style="text-align: center; ">
          <el-link type="primary" @click="doForget">忘记密码</el-link>&emsp;
          <el-link type="primary" @click="doRegister()">用户注册</el-link>
        </el-row>
      </el-form>
    </div>
</template>

<script>

  export default {
    name: "LoginForm",
    data() {
      return {
        loginForm: {
          username: '',
          password: ''
        }
      }
    },
    methods: {
      doSubmit() {
        let user = JSON.parse(window.localStorage.getItem('user'))
        if (user != null && user.hasOwnProperty(this.loginForm.username)) {
          if (user[this.loginForm.username].password === this.$md5(this.loginForm.password)) {
            this.$emit('login', this.loginForm.username)
            this.$router.replace('/store')
          } else {
            this.$notify.error({
              title: '错误',
              message: '用户名与密码不匹配',
              offset: 100,
              duration: 2000
            })
          }
        } else {
          this.$notify.error({
            title: '错误',
            message: '用户名不存在',
            offset: 100,
            duration: 2000
          })
        }
      },
      doRegister() {
        this.$router.push('register')
      },
      doForget() {
        this.$notify.info({
          title: '忘记密码？',
          message: '那就重新注册一个呗',
          offset: 100,
          duration: 2000
        })
      }
    }
  }
</script>

<style scoped>
 #login {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 30vw;
   height: 50vh;
   background: white;
   opacity: 0.9;
 }
  #login-form {
    width: 100vw;
    height: 100vh;
    background: url(~@a/933601.jpg) no-repeat center center fixed;
    background-size: 100%;
    opacity: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

</style>
